<template>
  <a-card title :bordered="false">
    <div class="search-form-box">
      <a-form layout="inline">
        <a-form-item label="输入搜索">
          <a-input v-model:value="sreach_name" placeholder="输入搜索"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleOpenModal('add')">添加一级类目</a-button>
        </a-form-item>
      </a-form>

      <a-form layout="inline">
        <a-form-item>
          <a-button type="primary" @click="getClassifyList()">
            <search-outlined />查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="handleReset">
            <reload-outlined />重置
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-card>

  <a-card :style="{'marginTop':'16px'}" title :bordered="false">
    <a-table
      :scroll="{y: 550 }"
      :dataSource="table.tabData"
      :columns="table.tableColumns"
      :pagination="pagination"
      :rowKey="record=>record.id"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status' ">
          <a-tag color="green" v-if="record.status == 1">启用</a-tag>
          <a-tag color="red" v-if="record.status == 2">禁用</a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button type="link" @click="handleOpenModal('edit',record)">编辑</a-button>
          <a-popconfirm title="删除该条记录将影响商品，确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDel(record)">
            <a-button type="link">删除</a-button>
          </a-popconfirm>

          <a-button type="link" @click="handleOpenSecondModal(record)">二级类目</a-button>
        </template>
      </template>
    </a-table>
  </a-card>

  <!-- 添加类目弹窗 -->
  <a-modal v-model:visible="visible" centered :footer="null" :title="title">
    <a-form :model="info" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" autocomplete="off" @finish="handleFormFinish">
      <a-form-item label="类目名称" name="name" :rules="[{ required: true, message: '请输入类目名称' }]">
        <a-input v-model:value="info.name" />
      </a-form-item>
      <a-form-item label="排序" name="is_sort" :rules="[{ required: true, message: '请输入类目排序' }]">
        <a-input v-model:value="info.is_sort" />
      </a-form-item>
      <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择类目状态' }]">
        <a-radio-group v-model:value="info.status">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
        <a-button type="primary" html-type="submit">确定</a-button>
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 二级类目弹窗 -->
  <a-modal v-model:visible="secondVisible" width="80%" centered :footer="null" title="二级类目">
    <a-card title :bordered="false">
      <div class="search-form-box">
        <a-form layout="inline">
          <a-form-item label="输入搜索">
            <a-input v-model:value="second_sreach_name" placeholder="请输入二级类目名称"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSecondOpenModal('add')">添加二级类目</a-button>
          </a-form-item>
        </a-form>
        <a-form layout="inline">
          <a-form-item>
            <a-button type="primary" @click="handleSearchSecond">
              <search-outlined />查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="handleResetSecond">
              <reload-outlined />重置
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <a-card :style="{'marginTop':'16px'}" title :bordered="false">
      <a-table
        :scroll="{y: 550 }"
        :dataSource="secondTable.secondTabData"
        :columns="secondTable.secondTableColumns"
        :pagination="secondPagination"
        :rowKey="record=>record.id"
        @change="handleSecondTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status' ">
            <a-tag color="green" v-if="record.status == 1">启用</a-tag>
            <a-tag color="red" v-if="record.status == 2">禁用</a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-button type="link" @click="handleSecondOpenModal('edit',record)">编辑</a-button>
            <a-popconfirm title="删除该条记录将影响商品，确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleSecondDel(record)">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
  </a-modal>

  <!-- 添加二级类目弹窗 -->
  <a-modal v-model:visible="addOrEditVisible" centered :footer="null" :title="secondTitle">
    <a-form
      :model="secondInfo"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 12 }"
      autocomplete="off"
      @finish="handleSecondAddOrEditClassify"
    >
      <a-form-item label="类目名称" name="name" :rules="[{ required: true, message: '请输入类目名称' }]">
        <a-input v-model:value="secondInfo.name" />
      </a-form-item>
      <a-form-item label="所属一级类目" name="pname">
        <a-input v-model:value="secondInfo.pname" disabled />
      </a-form-item>
      <a-form-item label="排序" name="is_sort" :rules="[{ required: true, message: '请输入类目排序' }]">
        <a-input v-model:value="secondInfo.is_sort" />
      </a-form-item>
      <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择类目状态' }]">
        <a-radio-group v-model:value="secondInfo.status">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
        <a-button type="primary" html-type="submit">确定</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { tableColumns, secondTableColumns } from './tableColumns'
import { seaClassList, addSeaClass, editSeaClass, delSeaClass } from '../../config/api'
import { error, success } from '../../utils/function'
export default defineComponent({
  components: {
    SearchOutlined,
    ReloadOutlined
  },
  setup() {
    onMounted(() => {
      getClassifyList()
    })

    const second = reactive({
      second_sreach_name: '', //搜索名字
      class_id: '', //类目ID
      page: 1, //页数
      type: '', //弹窗类型
      secondVisible: false, //二级类目弹窗
      secondTitle: '添加二级类目', //弹窗标题
      addOrEditVisible: false, //二级添加或编辑弹窗
      pid: '',
      pname: '',
      secondInfo: {
        name: '',
        pid: '',
        pname: '',
        is_sort: '',
        status: ''
      }
    })

    const secondTable = reactive({
      secondTableColumns,
      secondTabData: []
    })

    const secondPagination = reactive({
      defaultCurrent: 1,
      defaultPageSize: 10,
      total: 10,
      pageSize: 10
    })

    //二级类目删除
    const handleSecondDel = async data => {
      const res = await delSeaClass({ class_id: data.id })
      success(res.message)
      second.page = 1
      getSecondList()
    }

    //添加或编辑分类函数
    const handleSecondAddOrEditClassify = async data => {
      delete data.pname
      data.pid = second.secondInfo.pid
      let url
      if (second.type == 'edit') {
        data.class_id = second.secondInfo.id
        url = editSeaClass(data)
      } else if (second.type == 'add') {
        url = addSeaClass(data)
      }
      const res = await url
      getSecondList()
      success(res.message)
      second.addOrEditVisible = false
      second.secondInfo.name = ''
      second.secondInfo.is_sort = ''
      second.secondInfo.status = ''
    }

    //打开二级添加或编辑弹窗
    const handleSecondOpenModal = (type, data) => {
      if (type == 'add') {
        second.secondTitle = '添加二级类目'
        second.type = 'add'
        second.secondInfo = {
          name: '',
          is_sort: '',
          status: '',
          pid: second.pid,
          pname: second.pname
        }
        console.log(second.secondInfo)
      } else if (type == 'edit') {
        second.secondTitle = '编辑一级类目'
        second.secondInfo = JSON.parse(JSON.stringify(data))
        second.secondInfo.pid = second.pid
        second.secondInfo.pname = second.pname
        second.type = 'edit'
      }
      second.addOrEditVisible = true
    }

    //分页
    const handleSecondTableChange = e => {
      second.page = e.current
      getSecondList()
    }

    //重置
    const handleResetSecond = () => {
      second.second_sreach_name = ''
      second.page = 1
      getSecondList()
    }

    //搜索
    const handleSearchSecond = () => {
      if (second.second_sreach_name) {
        second.page = 1
        getSecondList()
      } else {
        error('请输入二级类目名称')
      }
    }

    //获取二级类目列表
    const getSecondList = async () => {
      let obj = {
        sreach_name: second.second_sreach_name,
        class_id: second.pid,
        page: second.page
      }
      const res = await seaClassList(obj)
      secondTable.secondTabData = res.data.data
      ;(secondPagination.total = res.data.total), (second.page = res.data.current_page), (secondPagination.pageSize = res.data.per_page)
    }

    /**--------------------------------------------------------------------------------- */
    const state = reactive({
      sreach_name: '', //搜索名字
      class_id: '', //类目ID
      page: 1, //页数
      type: '', //弹窗类型
      info: {
        name: '',
        pid: 0,
        is_sort: '',
        status: ''
      }, //每条详情
      visible: false, //弹窗
      title: '添加一级类目' //弹窗标题
    })

    //表格数据
    const table = reactive({
      tableColumns,
      tabData: []
    })

    //分页数据
    const pagination = reactive({
      defaultCurrent: 1,
      defaultPageSize: 10,
      total: 10,
      pageSize: 10
    })

    //打开二级类目列表弹窗
    const handleOpenSecondModal = data => {
      second.secondVisible = true
      second.pid = data.id
      second.pname = data.name
      console.log(second.pname)
      getSecondList()
    }

    //提交数据
    const handleFormFinish = data => {
      addOrEditClassify(data)
    }

    //删除
    const handleDel = async data => {
      const res = await delSeaClass({ class_id: data.id })
      success(res.message)
      state.page = 1
      getClassifyList()
    }

    //添加或编辑分类函数
    const addOrEditClassify = async data => {
      let url
      if (state.type == 'edit') {
        data.class_id = state.info.id
        data.pid = state.info.pid
        url = editSeaClass(data)
      } else if (state.type == 'add') {
        url = addSeaClass(data)
      }
      const res = await url
      getClassifyList()
      success(res.message)
      state.visible = false
      state.info = {
        name: '',
        pid: 0,
        is_sort: '',
        status: ''
      }
    }

    //分页
    const handleTableChange = e => {
      state.page = e.current
      getClassifyList()
    }

    //重置
    const handleReset = () => {
      if (state.sreach_name) {
        state.sreach_name = ''
        state.page = 1
        state.class_id = ''
        getClassifyList()
      }
    }

    //打开弹窗
    const handleOpenModal = (type, data) => {
      if (type == 'add') {
        state.title = '添加一级类目'
        state.type = 'add'
        state.info = {
          name: '',
          pid: 0,
          is_sort: '',
          status: ''
        }
      } else if (type == 'edit') {
        state.title = '编辑一级类目'
        state.info = JSON.parse(JSON.stringify(data))
        state.type = 'edit'
      }
      state.visible = true
    }

    //获取列表数据
    const getClassifyList = async () => {
      let obj = {
        sreach_name: state.sreach_name,
        class_id: state.class_id,
        page: state.page
      }
      const res = await seaClassList(obj)
      table.tabData = res.data.data
      ;(pagination.total = res.data.total), (state.page = res.data.current_page), (pagination.pageSize = res.data.per_page)
    }

    return {
      ...toRefs(second),
      secondTable,
      secondPagination,
      handleSecondTableChange,
      getSecondList,
      handleSecondOpenModal,
      handleResetSecond,
      handleSearchSecond,
      handleSecondDel,
      handleSecondAddOrEditClassify,
      /************************************************************************ */
      ...toRefs(state),
      table,
      pagination,
      getClassifyList,
      handleDel,
      handleFormFinish,
      handleTableChange,
      handleOpenModal,
      handleReset,
      handleOpenSecondModal
    }
  }
})
</script>

<style lang="scss" scoped>
.search-form-box {
  display: flex;
  justify-content: space-between;
}
</style>
